<template>
	<view class="Achievememt">
		<header class="header Row">
			<!-- <view class="tab">
				<view class="tabItem" :class="{'active' : index == current}" @click="clickTab(index,item.type)"
					v-for="(item,index) in tabItemList" :key="index">
					{{item.name}}
				</view>
			</view> -->

			<view class="Row" style="width: 24%;justify-content: center;" @click="show = true">
				筛选<view class="iconfont" style="font-size: 22px;margin-left: 2px;">&#xe600;</view>
			</view>
		</header>

		<view class="Achievememt_detailList" style="margin-top: 42px;">
			<view v-if="detailList.length != 0">
				<view class="detailBox Column" v-for="(item,index) in detailList" :key="index">
					<view class="detailBox_left Row">
						<view class="productID">
							业务员姓名：{{item.realname}}
							<view class="level">{{item.levelName}}</view>
						</view>
						<view class="time">团队人数：{{item.team.team_num}}</view>
					</view>
					<view class="detailBox_left Row" style="margin: 6rpx 0;">
						<view class="productID">联系方式：{{item.salesperson_account}}</view>
						<view class="time">团队商户数：{{item.team.team_merchant_num}}</view>
					</view>
					<view class="detailBox_left Row">
						<view class="productID">注册时间：{{item.register_date}}</view>
						<view class="time">直推商户数：{{item.team.self_merchant_num}}</view>
					</view>
					<!-- <view class="detailBox_right Row">
						<view class="name">{{item.realname}}</view>
						<view class="money">直推商户数：{{item.team.self_merchant_num}}</view>
					</view> -->
				</view>
			</view>

			<view class="null" v-else>
				<u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
			</view>
		</view>

		<!-- 弹窗 -->
		<u-popup :show="show" mode="top" @close="close" @open="open">
			<h3 class="popupBox_title Row">筛选</h3>
			<scroll-view scroll-y="true" class="popupBox_Body">
				<view class="item Column">
					<view class="itemTitle">月份</view>
					<view class="monthList Row">
						<view :class="monthList_Index == index ? 'active Row' : 'monthChild Row'"
							v-for="(item,index) in monthList" :key="index" @click="monthCut(item.type,index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- <view class="item Row" style="margin-bottom: 20rpx;">
					<view style="width: 40%;" class="itemTitle">姓名</view>
					<input type="text" :placeholder="this.submitInfo.realname" class="inputCSS"
						data-submitInfo="realname" @input="inputVal" />
				</view>
				<view class="item Row" style="margin-bottom: 20rpx;">
					<view style="width: 40%;" class="itemTitle">联系方式</view>
					<input type="text" :placeholder="this.submitInfo.mobile" class="inputCSS" data-submitInfo="mobile"
						@input="inputVal" />
				</view>
				<view class="item Column">
					<view class="itemTitle">等级</view>
					<view class="monthList Row">
						<view :class="levels_Index == index ? 'active Row' : 'monthChild Row'"
							v-for="(item,index) in levels" :key="index" @click="levelCut(item.id,index)">
							{{item.name}}
						</view>
					</view>
				</view> -->
			</scroll-view>

			<footer class="footBox Row">
				<view class="reset Row" @click="reset">重置</view>
				<view class="finish Row" @click="finish">完成</view>
			</footer>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				current: 0,
				currentType: 'd',
				tabItemList: [{
						'name': '日数据',
						'type': 'd' //t
					},
					{
						'name': '月数据',
						'type': 'm'
					},
					{
						'name': '累计数据',
						'type': 't'
					}
				],

				monthList: [{
					name: '一月',
					type: '01' //t
				}, {
					name: '二月',
					type: '02' //t
				}, {
					name: '三月',
					type: '03' //t
				}, {
					name: '四月',
					type: '04' //t
				}, {
					name: '五月',
					type: '05' //t
				}, {
					name: '六月',
					type: '06' //t
				}, {
					name: '七月',
					type: '07' //t
				}, {
					name: '八月',
					type: '08' //t
				}, {
					name: '九月',
					type: '09' //t
				}, {
					name: '十月',
					type: '10' //t
				}, {
					name: '十一月',
					type: '11' //t
				}, {
					name: '十二月',
					type: '12' //t
				}],
				monthList_Index: "", // 下标
				monthList_type: "",
				monthList_date: "",

				levels: [],
				levels_Index: "", // 下标
				level_id: "", // id

				submitInfo: {
					realname: '',
					mobile: '',
				},

				detailList: [],

				current_page: 1,
				last_page: 1
			}
		},
		onLoad(options) {
			// console.log(options.Param)
			// if (options.Param == "month") {
			// 	this.clickTab(1, "m")
			// }
		},
		onShow() {
			let that = this;
			that.detailList = [];
			that.current_page = 1;
			that.last_page = 1;
			that.getLevel();
			that.getData();
			that.homePageData();
		},
		methods: {
			reset() { // 重置
				let that = this;
				that.current_page = 1;
				that.last_page = 1;
				that.detailList = [];
				that.monthList_type = "";
				that.submitInfo.realname = "";
				that.submitInfo.mobile = "";
				that.levels_Index = 0;
				that.level_id = "";

				that.show = false;
				that.homePageData();
			},
			finish() { // 筛选
				let that = this;
				that.current_page = 1;
				that.last_page = 1;
				that.detailList = [];
				that.show = false;
				that.homePageData();
			},
			inputVal(e) {
				let name = e.currentTarget.dataset.submitinfo;
				let Val = e.detail.value.trim();
				this.submitInfo[name] = Val;
			},
			monthCut(e, index) { // 月份筛选
				this.monthList_Index = index;
				this.monthList_type = this.monthList[index].type;
			},
			levelCut(e, index) { // 等级筛选
				this.levels_Index = index;
				this.level_id = e;
			},
			getLevel() { // 获取等级列表
				let that = this;
				uni.$u.http.post('/kafu.dt_reward/levelList', {}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return false;
					}
					let newInfo = {
						id: "",
						name: "全部"
					};
					let data = res.data.list;
					data.unshift(newInfo);
					that.levels = data;
				}).catch(err => {
					console.log(err)
				})
			},
			close() {
				this.show = false;
			},
			clickTab(cur, type) {
				this.current = cur
				this.currentType = type;
				//切换后的业务逻辑
				this.current_page = 1;
				this.last_page = 1;
				this.detailList = [];
				this.homePageData()
			},
			getData() { // 默认当前月份
				// 创建一个新的Date对象，表示当前日期和时间  
				var now = new Date();
				// 获取年份  
				var year = now.getFullYear();
				// 获取月份，并加1以转换为常规月份表示（1-12）  
				var month = now.getMonth() + 1;
				this.monthList_Index = month - 1;
				// 如果月份小于10，前面补0（可选，根据需要选择）  
				month = month < 10 ? '0' + month : month;
				// 打印结果  
				// console.log(year + '-' + month);
				this.monthList_date = year + '-' + month
			},
			homePageData() {
				let that = this;
				var now = new Date();
				var year = now.getFullYear();
				if (that.current_page > that.last_page) {
					return false;
				}
				uni.$u.http.post('/kafu.dt_reward/direct_team', {
					type: that.monthList_type == ""? "t" : "m",
					date: that.monthList_type == "" ? that.monthList_date : year + '-' + that.monthList_type,
					// realname: that.submitInfo.realname,
					// mobile: that.submitInfo.mobile,
					// level_id: that.level_id,
					page: that.current_page,
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return false;
					}
					let array = res.data.userList.data;
					array.forEach(e => {
						that.detailList.push(e)
					})
					that.last_page = res.data.userList.last_page;
				}).catch(err => {
					console.log(err)
				})
			},
		},
		onReachBottom() {
			let that = this;
			that.current_page++;
			that.homePageData();
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.Achievememt {
		width: 100%;

		.header {
			justify-content: flex-end;
			width: 95.2%;
			box-shadow: 0px 2px 10px #e6e6e6;
			background-color: #fff;
			padding: 10px;
			position: fixed;
			top: 44px;
		}

		.tab {
			display: flex;
			width: 76%;

			.tabItem {
				color: #7E7E9A;
				width: 33.3%;
				text-align: center;
				padding: 20rpx 0;
			}

			.active {
				color: black;
				font-weight: bold;
				position: relative;
			}

			.active:after {
				content: '';
				width: 34%;
				height: 16rpx;
				border-radius: 8rpx;
				background-color: #0056FF;
				opacity: 0.7;

				position: absolute;
				left: 34%;
				bottom: 12rpx;
			}
		}

		&_detailList {

			.null {
				height: 70vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.detailBox {
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-bottom: 2rpx solid #F5F6F8;
				padding: 20rpx;

				&_right {
					width: 100%;
					color: #7E7E9A;
					justify-content: space-around;
					align-items: center;
					margin-top: 20rpx;

					.money {
						width: 35%;
						text-align: center;
						font-size: 32rpx;
						display: flex;
						justify-content: center;
					}

					.time {
						width: 35%;
						font-size: 32rpx;
						display: flex;
						justify-content: center;
					}
				}

				&_left {
					width: 100%;
					justify-content: space-between;
					align-items: flex-start;

					.name {
						font-weight: 550;
					}

					.productID {
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 62%;
						font-size: 16px;

						.level {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							color: #fff;
							font-size: 14px;
							background-color: #2b72fb;
							border-radius: 4rpx;
							padding: 4rpx 10rpx;
							margin-left: 12rpx;
						}
					}
				}
			}
		}

		.popupBox_title {
			justify-content: center;
			width: 100%;
			padding: 18rpx 0;
		}

		.popupBox_Body {
			width: 90.5%;
			height: 32vh;
			padding: 0 20px;

			.monthList {
				flex-wrap: wrap;
				width: 100%;

				// .monthChild:nth-last-child(1),
				// .monthChild:nth-last-child(2){
				// 	margin-bottom: 0;
				// }

				.active {
					justify-content: center;
					width: 22%;
					color: #0056ff;
					background-color: #e6efff;
					padding: 20rpx 0;
					margin-bottom: 30rpx;
					margin-right: 10px;
				}

				.monthChild:nth-child(4n) {
					margin-right: 0;
				}

				.monthChild {
					justify-content: center;
					width: 22%;
					color: #1a1a1a;
					background-color: #f6f6f6;
					padding: 20rpx 0;
					margin-bottom: 30rpx;
					margin-right: 10px;
				}
			}

			.inputCSS {
				width: 50%;
				background-color: #f6f6f6;
				padding: 20rpx;
			}

			.itemTitle {
				font-size: 32rpx;
				padding: 20rpx 0;
			}
		}

		.footBox {
			width: 100%;
			border-top: 1px solid #F5F6F8;

			.reset,
			.finish {
				justify-content: center;
				width: 50%;
				font-size: 34rpx;
				padding: 20rpx 0;
			}

			.finish {
				color: #fff;
				background-color: #0056FF;
			}
		}
	}
</style>